<template>
	<div>
		<h1>盒子的水平垂直居中</h1>
		<main>
			<el-card>
				<h2>1. 定位的方式</h2>
				<div class="father">
					<div class="son"></div>
				</div>
			</el-card>
			<el-card>
				<h2>2. flex布局的方式</h2>
				<div class="f-father">
					<div class="f-son"></div>
				</div>
			</el-card>

			<el-card>
				<h2>3. margin: auto的方式</h2>
				<div class="m-father">
					<div class="m-son"></div>
				</div>
			</el-card>
		</main>
		<h1>文字的水平垂直居中</h1>
		<el-card>
			<div class="text">hello,world</div>
		</el-card>
		<h1>rem</h1>
		<el-card>
			<div class="rem">rem</div>
		</el-card>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	main {
		display: flex;
		flex-wrap: wrap;
	}
	.el-card {
		width: 320px;
		margin: 10px;
	}
	.father {
		position: relative;
		width: 200px;
		height: 200px;
		background-color: cyan;
		.son {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 50px;
			height: 50px;
			background-color: #ccc;
		}
	}
	.f-father {
		display: flex;
		justify-content: center; /* 定义元素在主轴的对齐方式 */
		align-items: center; /* 定义元素在侧轴的对齐方式 */
		width: 200px;
		height: 200px;
		background-color: cyan;
		.f-son {
			width: 50px;
			height: 50px;
			background-color: #ccc;
		}
	}
	.m-father {
		position: relative;
		width: 200px;
		height: 200px;
		background-color: cyan;
		.m-son {
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 50px;
			height: 50px;
			background-color: #ccc;
		}
	}
	.text {
		width: 200px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: aqua;
	}
	.rem {
		font-size: 1rem;
	}
</style>
